<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function editable(sample) {
  return `<div contenteditable>${sample}</div>`;
}

function testIt(sample, expected, description) {
  selection_test(editable(sample), 'removeFormat', editable(expected),
                 description);
}

testIt('^abc|',
       '^abc|',
       '1 text only');
testIt('^<i>abc</i> <u>def</u>|',
       '^abc def|',
       '2 abc def');
testIt('^<b><u>abc</u> def</b> <a href="http://foo"><em>xyz</em></a>|',
       '^abc def <a href="http://foo">xyz|</a>',
       '3 include A');
testIt('<b><u>abc</u> ^def|</b> <a href="http://foo"><em>xyz</em></a>',
       '<b><u>abc</u> </b>^def| <a href="http://foo"><em>xyz</em></a>',
       '4 partial');
testIt('<sub><tt>abc ^def| xyz</tt></sub>',
       '<sub><tt>abc </tt></sub>^def|<sub><tt> xyz</tt></sub>',
       '5 middle word');
testIt('<q><ins><var>abc ^wor</var>ld|</ins> xyz</q>',
       '<q><ins><var>abc </var></ins></q>^world|<q> xyz</q>',
       '6 mixed');
testIt('<b>abc <dfn>def <kbd>^xyz|</kbd></dfn></b>',
       '<b>abc <dfn>def </dfn></b>^xyz|',
       '7 nested last');
testIt('<b>abc <dfn>^def| <kbd>xyz</kbd></dfn></b>',
       '<b>abc </b>^def|<b><dfn> <kbd>xyz</kbd></dfn></b>',
       '8 nested middle');
testIt('<code>^abc <strong>def| xyz</storng></code>',
       '^abc def|<code><strong> xyz</strong></code>',
       '9 nested two words');
testIt('<acronym><tt><mark><samp>^abc</samp></mark> def| <sub>xyz</sub></tt></acronym>',
       '<mark>^abc</mark> def|<acronym><tt> <sub>xyz</sub></tt></acronym>',
       '10 nested two words');
testIt('<b><div>abc ^def</div></b><div>xyz|</div>',
       '<div><b>abc </b>^def</div><div>xyz|</div>',
       '11 nested last two words');
testIt('<q><b><div>abc ^def</div></b>xyz|</q>',
       '<div><q><b>abc </b></q>^def</div>xyz|',
       '12 nested last two words');
testIt('<q><b><div>abc ^def|</div></b>xyz</q>',
       '<div><q><b>abc </b></q>^def|</div><q>xyz</q>',
       '13 end of paragraph');
testIt('<b><div>^abc</div>|xyz</b>',
       '<div>^abc</div><b>|xyz</b>',
       '14 line');
testIt('^<i style="font-weight:bold;">abc</i> <u>def</u>|',
       '^abc def|',
       '15 font-weight:bold');
testIt('<font color="red"><b style="font-size: large;"><u>abc</u> ^def|</b> xyz</font>',
        '<font color="red"><b style="font-size: large;"><u>abc</u> </b></font>^def|<font color="red"> xyz</font>',
        '16 font-size:large');
testIt('<font size="5"><i><u style="font-size: small;">abc</u> ^def|</i><font size="3"> xyz</font></font>',
       '<font size="5"><i><u style="font-size: small;">abc</u> </i></font>^def|<font size="5"><font size="3"> xyz</font></font>',
       '17 font-size:small');
testIt('<sup><div style="text-decoration-line: underline; font-size: large;">abc <dfn style="font-size: normal;">^def|</dfn></div> xyz</sup>',
       '<div style><sup><font size="4"><u>abc </u></font></sup>^def|</div><sup> xyz</sup>',
       '18 nested font-size');
</script>
